<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <el-menu default-active="/manage/recommend" class="el-menu-demo" mode="horizontal"
                    active-text-color="#000" @select="handleSelect" :ellipsis="false" :router="true">
                    <el-menu-item index="/manage" class="firsttitle">蛋糕商城后台系统</el-menu-item>
                    <el-menu-item index="/index">网站首页</el-menu-item>
                    <el-menu-item index="/manage/recommend">推荐管理</el-menu-item>
                    <el-menu-item index="/manage/goods">商品管理</el-menu-item>
                    <el-menu-item index="/manage/order">订单管理</el-menu-item>

                    <div class="flex-grow" />
                    <el-menu-item>{{ store.getters.userInfo.username }}</el-menu-item>
                    <el-menu-item index="/index" @click="logout">注销</el-menu-item>
                </el-menu>
            </el-header>

            <el-main>
                <router-view />
            </el-main>

            <el-footer :style="{ backgroundColor: '#ccc' }">
                <p class="footer">
                    蛋糕商城 计中职20-1 卢子昂
                </p>

            </el-footer>

        </el-container>

    </div>

</template>
<script setup>
import api from '@/api/api';
import { ElMessage } from 'element-plus';
import { onMounted, ref, computed } from 'vue';
import { useStore } from 'vuex'

const store = new useStore();

const loginState = computed(() => {
    return store.getters.isLogin;

})

const logout = () => {
    store.dispatch('LoginExit');
    ElMessage({
        message: '注销成功...',
        type: 'success'
    })
}

// onMounted()

</script>
<style scoped>
.firsttitle {
    font-size: 25px;
    font-weight: bolder;
}

.flex-grow {
    flex-grow: 1;
}

.footer {
    text-align: center;
    color: white;
    font-size: 14px;
    margin: 20px 0 0 0;
}
</style>